<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card shadow="hover" class="mgb20" style="height: 503px">
          <div class="user-info">
            <el-avatar :size="32" />
            <div class="user-info-cont">
              <div class="user-info-name">{{ name }}</div>
              <div class="mar">
                <div>{{ role }}</div>
                <div>{{ down }}</div>
              </div>
            </div>
          </div>
          <h4 class="font-20">待审批项</h4>
          <div class="user-info-pending">
            <div
              v-for="(item, index) in pendingList"
              :key="index"
              class="pending"
            >
              <span class="pendnum">{{ item.num }}</span>
              <span class="pengtxt">{{ item.txt }}</span>
            </div>
          </div>
          <h4 class="font-20">快捷入口</h4>
          <div class="user-info-entranceList">
            <div
              v-for="(item, index) in entranceList"
              :key="index"
              class="pending"
            >
              <span class="entrancetxt">{{ item }}</span>
              <img src="@/static/kanban/jinru.png" alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="hover" style="height: 503px; padding: 10px">
          <div class="header">
            <h4 style="font-size: 24px">财务数据看板</h4>
            <el-date-picker
              v-model="selectMonth"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
            />
          </div>
          <el-row>
            <el-col
              :span="7"
            ><div class="h-center">
              <div>
                <span class="f-20">承业出账</span>
                <span class="font-c">承包区:26个</span>
                <span class="font-c">业务:10个</span>
              </div>
              <div>
                <span> 面单配置完成：</span>
                <span class="font-b">0%</span>
              </div>
              <div>
                <span>中转费计费率：</span>
                <span class="font-b">2.33%</span>
                <span class="font-b">2.33%</span>
              </div>
              <div>
                <span>派费计费率：</span>
                <span class="font-b">0%</span>
                <span class="font-b">0%</span>
              </div>

              <div>
                <span>奖罚分摊完成：</span>
                <span class="font-b">0%</span>
                <span class="font-b">0%</span>
              </div>
            </div></el-col>
            <el-col :span="1"><div class="line" /></el-col>
            <el-col
              :span="7"
            ><div class="h-center">
              <div>
                <span class="f-20">客户账单</span>
                <span class="font-c">客户总数:16个</span>
              </div>
              <div>
                <span> 面单配置完成：</span>
                <span class="font-b">0%</span>
              </div>
              <div>
                <span>中转费计费率：</span>
                <span class="font-b">2.33%</span>
              </div>
              <div>
                <span>客户账单生成：</span>
                <span class="font-b"> 0%</span>
              </div>

              <div>
                <span class="f-20">固定费用</span>
                <span class="font-b">0%</span>
                <span class="font-b">0%</span>
              </div>
              <div>
                <span>成本：</span>
                <span class="font-b">0%</span>
              </div>
              <div>
                <span>在线录入：</span>
                <span class="font-16">去录入</span>
              </div>
            </div></el-col>
            <el-col :span="1"><div class="line" /></el-col>
            <el-col
              :span="7"
            ><div class="h-center">
              <div>
                <span class="f-20">承业工资表</span>
              </div>
              <div>
                <span> 承业工资表</span>
                <span>0个</span>
              </div>
              <div>
                <span>中转费计费率：</span>
                <span>2.33%</span>
              </div>
              <div>
                <span>客户账单生成：</span>
                <span>去查看</span>
              </div>

              <div>
                <span class="f-20">职能/其他工资表</span>
                <span>0%</span>
                <span>0%</span>
              </div>
              <div>
                <span>发放人数：</span>
                <span>0个</span>
              </div>
              <div>
                <span>工资总额：</span>
                <span>0%</span>
              </div>
              <div>
                <span>工资表详情：</span>
                <span>0%</span>
              </div>
            </div></el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-col :span="23">
      <el-card shadow="hover" style="height: 450px; margin-bottom: 30px">
        <div class="clearfix">
          <h4 class="font-24">网点利润</h4>
        </div>
        <el-row>
          <el-col :span="16" class="ec1">
            <div
              id="mychart"
              ref="mychart"
              style="padding-top: 20px"
              class="echart"
              :style="{ float: 'left', width: '100%', height: '320px' }"
            />
            <div class="pos">
              <div>
                <span>利润(万元)</span>
                <span>{{ profit }}</span>
              </div>
              <div>
                <span>收入(万元)</span>
                <span>{{ revenue }}</span>
              </div>
              <div>
                <span>成本(万元)</span>
                <span>{{ cost }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="1"><div class="line" /></el-col>
          <el-col :span="7" class="pie">
            <div
              id="myPiechart"
              ref="myPiechart"
              style="padding-top: 20px"
              class="echart"
              :style="{ float: 'left', width: '100%', height: '320px' }"
            />
            <div class="button">
              <el-button type="primary">收入</el-button>
              <el-button type="primary">成本</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      name: 'Hi,IT',
      role: '新手引导',
      profit: 100, // 利润
      revenue: 100, // 收入
      cost: 100, // 成本
      // name: '张雪',
      xData: ['2020-02', '2020-03', '2020-04', '2020-05'], // 横坐标数据
      yData: [30, 132, 80, 134], // 纵坐标数据，与横坐标对应
      down: '下载操作手册',
      selectMonth: '',
      pendingList: [
        { num: 0, txt: '预付款' },
        { num: 0, txt: '物料申领' }
      ], // 待审批项
      entranceList: [
        '出港结算',
        '进港结算',
        '结算关系配..',
        '报价维护',
        '站点预付款',
        '面单发放'
      ]
    }
  },
  created() {
    this.initData({})
  },
  mounted() {
    this.initEcharts()
    this.initPieEcharts()
  },

  methods: {
    // 柱状图
    initEcharts() {
      const option = {
        legend: { orient: 'vertical', right: 10 },
        tooltip: {},
        dataset: {
          source: [
            ['product', '收入', '成本'],
            ['面单', 7000, 8000],
            ['有偿成本', 7000, 8080],
            ['物料成本', 7000, 7000],
            ['面单成本', 7000, 7000],
            ['中转成本', 7000, 7000],
            ['奖罚类收支', 7000, 7000],
            ['总部考核', 7000, 7000],
            ['中转费/续重费', 7000, 7000]
          ]
        },
        xAxis: {
          type: 'category',
          // 书写格式
          axisLabel: {
            formatter: (val) => {
              let txt = val
              if (val.length > 3) {
                txt = val.substr(0, 3) + '...'
              }
              return txt
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: '#2087D0',
              barBorderRadius: [10, 10, 0, 0]
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: '#F4B259',
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        ]
      }
      const myChart = echarts.init(this.$refs.mychart) // 图标初始化
      myChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    // 饼图
    initPieEcharts() {
      const data = [
        { name: '面单收入', value: 1501 },
        { name: '中转费/续重费收入', value: 1305 },
        { name: '有偿派费收入', value: 1014 },
        { name: '末端进港操作补贴', value: 1330 }
      ]
      const totalCount = data.reduce((vs, v) => vs + v.value, 0)
      const formatNumber = (num) =>
        num.toString().replace(/(?=(\B)(\d{3})+$)/g, ',')

      const option = {
        legend: {
          orient: 'vertical',
          left: 'right',
          top: 'center',
          align: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            text: `{name|总收入/(万元)}\n{val|${formatNumber(totalCount)}}`,
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333'
                }
              }
            }
          },
          {
            text: '收入占比成本',
            left: 'left'
          }
        ],

        dataset: {
          source: [
            ['product', '收入', '成本'],
            ['面单', 7000, 8000],
            ['有偿成本', 7000, 8080],
            ['物料成本', 7000, 7000],
            ['面单成本', 7000, 7000],
            ['中转成本', 7000, 7000],
            ['奖罚类收支', 7000, 7000],
            ['总部考核', 7000, 7000],
            ['中转费/续重费', 7000, 7000]
          ]
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                title: '#fff',
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1048,
                name: '面单收入',
                itemStyle: { color: '#4F90F3' }
              },
              {
                value: 735,
                name: '中转费/续重费收入',
                itemStyle: { color: '#F4B259' }
              },
              {
                value: 580,
                name: '有偿派费收入',
                itemStyle: { color: '#30C86D' }
              },
              {
                value: 484,
                name: '末端进港操作补贴',
                itemStyle: { color: '#AB77EB' }
              }
            ]
          }
        ]
      }
      const myChart = echarts.init(this.$refs.myPiechart) // 图标初始化
      myChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    kanban() {
      this.$router.push('./branchFinance/kanban')
    },
    jobSearch() {
      this.getJobListByMonth()
    },
    async initData(data) {
      // 获取当前时间
      var now = new Date()
      var monthn = now.getMonth() + 1
      var yearn = now.getFullYear()
      this.selectMonth = yearn + '-' + monthn

      this.selectUser = parseInt(sessionStorage.getItem('userid'))
      // this.getWeekJobList({
      //   userid: sessionStorage.getItem("userid"),
      //   weekid: "1"
      // });
      this.getJobListByMonth()
    },
    async getJobListByMonth(data) {}
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.pos {
  position: absolute;
  top: 1%;
  display: flex;
  width: 20%;
  justify-content: space-between;
  div {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    span {
      font-size: 16px;
    }
    span:last-child {
      font-size: 24px;
    }
  }
}
.button {
  position: absolute;
  width: 10%;
  top: 1%;
  right: 1%;
  display: flex;
  justify-content: center;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}
.user-info-name {
  font-size: 18px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ffd8d8d8;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}
.font-20 {
  font-size: 20px;
  font-weight: 600;
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}
.entrancetxt {
  font-size: 18px;
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}
.clearfix {
  border-bottom: 1px solid #ccc;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ffd8d8d8;
  margin-bottom: 20px;
}

.user-info-cont {
  padding-left: 10px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 14px;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column;
  font-size: 7px;
}

.user-info-cont div:first-child {
  font-size: 9px;
  color: #222;
}
.mar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row;
  margin-top: 10px;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}
.user-info-pending {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-top: 10px;
  border-bottom: 1px solid #ffd8d8d8;
  .pending {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: column;
    .pendnum {
      font-size: 36px;
      color: #2dade8d0;
    }
    .pengtxt {
      font-size: 18px;
    }
  }
}
.user-info-entranceList {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap;
  .pending {
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 10px 0;
  }
}

.mgb20 {
  margin-bottom: 10px;
  height: 252px;
}
.font-24 {
  font-size: 24px;
  font-weight: 600;
}

.todo-item {
  font-size: 14px;
}
.h-center {
  display: flex;
  align-items: baseline;
  flex-flow: column;
  font-size: 16px;
  div {
    display: flex;
    flex-flow: row;
    margin: 10px 0 10px 0;
    justify-content: space-between;
    width: 100%;
    span:first-child {
      width: 40%;
    }
  }
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.f-20 {
  font-size: 20px;
  font-weight: 600;
}
.font-b {
  font-size: 24px;
  color: #6fabf4d0;
}
.font-16 {
  font-size: 16px;
  color: #6fabf4d0;
}
.font-c {
  font-size: 16px;
  color: #ccc;
}
.line {
  height: 320px;
  width: 1px;
  background: #ccc;
  margin: 10px 0 0 20px;
}
</style>
